<template>
  <common-page :title="title">
    <el-button slot="header" @click="back">返 回</el-button>
    <div class="flow-analysis-wrap" slot="content">
      <div class="split-line-12"></div>
      <div class="f-a-w-container">
        <el-row :gutter="12">
          <el-col :span="12">
            <div class="chart-wrap pie">
              <title-chart
                type="chart-pie"
                title="接口响应状态分布"
                :dataset="pieDataSet"
              ></title-chart>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chart-wrap line">
              <title-chart
                type="chart-line"
                title="资产七日访问量趋势"
                :dataset="lineDataSet"
              ></title-chart>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="12">
          <el-col :span="24">
            <div class="chart-wrap bar">
              <title-chart
                type="chart-bar"
                title="流量分析"
                :dataset="barDataSet"
              ></title-chart>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </common-page>
</template>

<script>
import TitleChart from "@/components/EChart/TitleChart";
import {
  getAccessFlow,
  getAnalysisUpData,
  getAnalysisDownData,
  getErrorData,
} from "@/api/apisecurity/apiinterface/interface";
import Utils from "@/utils/index";
import { getPercent } from "@/utils/util";
export default {
  name: "flowAnalysis",
  components: {
    TitleChart,
  },
  props: {
    path: {
      type: String,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      title: "",
      pieDataSet: {
        dimensions: ["name", "value"],
        source: [],
        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["value"]}</div>`;
            },
          },
        },
      },
      lineDataSet: {
        dimensions: ["日期", "访问量"],
        source: [],
      },
      barDataSet: {
        // dimensions: ['date', 'up', 'down'],
        dimensions: ["日期", "上行流量", "下行流量"],
        source: [],
        option: {
          color: ["#72c240", "#448ff7"],
          legend: {
            show: true,
            data: ["上行", "下行"],
          },
          yAxis: {
            name: "单位/KB",
          },
        },
      },
    };
  },
  created() {
    this.getAccessFlow();
    this.getErrorData();
    this.getAnalysisData();
  },
  methods: {
    getAnalysisData() {
      Promise.all([this.getUpData(), this.getDownData()]).then((res) => {
        let analyse = res[0].analyse;

        analyse.forEach((item, index) => {
          item.down = res[1].analyse[index].down;
        });

        analyse = analyse.slice(0, 12).reverse();
        this.barDataSet.source = analyse.reduce((r, c) => {
          r.push({
            日期: c.date,
            上行流量: c.up,
            下行流量: c.down,
          });
          return r;
        }, []);
      });
    },

    getUpData() {
      this.title = "流量分析 " + this.path;
      return new Promise((resolve, reject) => {
        getAnalysisUpData({ path: this.path }).then((res) => {
          if (res && res.code === 200) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },

    getDownData() {
      return new Promise((resolve, reject) => {
        getAnalysisDownData({ path: this.path }).then((res) => {
          if (res && res.code === 200) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },

    getAccessFlow() {
      let date = Utils.parseTime(new Date(), "{y}-{m}-{d}");
      getAccessFlow({
        path: this.path,
        interfaceId: this.id,
        endTime: date,
      }).then((res) => {
        if (res && res.code === 200) {
          this.lineDataSet.source = res.data.reduce((r, c) => {
            r.push({
              日期: c.days,
              访问量: c.visits,
            });
            return r;
          }, []);
        } else {
          this.lineDataSet.source = [];
        }
      });
    },
    getErrorData() {
      getErrorData({
        path: this.path,
      }).then((res) => {
        if (res && res.code === 200) {
          let { analyse, access, errorDist } = res.data;
          if (!errorDist.every((f) => f.value === 0)) {
            this.pieDataSet.source = errorDist;
            let _this = this;
            this.pieDataSet.option.legend.formatter = function (name) {
              let passSource = null;
              let passSourcecount = 0;
              let count = null;
              _this.pieDataSet.source.forEach((item) => {
                passSourcecount = passSourcecount + item.value;
                if (item.name == name) {
                  passSource = item.name + " | ";
                  count = " " + item.value;
                }
              });
              passSource =
                passSource + getPercent(count, passSourcecount) + count;
              return passSource;
            };
          } else {
            this.pieDataSet.source = [];
          }
        } else {
          this.pieDataSet.source = [];
        }
      });
    },
    back() {
      this.$emit("changeFlowAnalysisDiv");
    },
  },
};
</script>

<style lang="scss" scoped>
.flow-analysis-wrap {
  box-sizing: border-box;
  background-color: #eee;
  height: 100%;

  .f-a-w-container {
    height: calc(100% - 12px);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .chart-wrap {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }

  .pie {
  }

  .line {
  }

  .bar {
    margin-top: 12px;
  }
}
</style>
